<template>
    <h2>门店信息渲染列表</h2>
    门店名称
    <input type="text" placeholder="请输入门店名称" v-model="name" style="margin-right: 15px;">
    服务范围
    <select v-model="id" style="margin-right: 15px;">
                        <option value="0">--请选择类型--</option>
                        <option v-for="item in InfoType" :value="item.t_id">{{ item.t_name }}</option>
                    </select>
    <input type="button" value="查询" @click="Show" style="margin-right: 15px;"><br>
    <input type="button" value="批量删除" @click="Delpl" style="margin-right: 15px;">
    <input type="button" value="批量修改状态" @click="Statepl" style="margin-right: 15px;">
    <table class="table table-bordered" border="1">
        <thead>
            <tr>
                <td><input type="checkbox" v-model="floe" @change="quan"></td>
                <td>门店编号</td>
                <td>门店名称</td>
                <td>门店地址</td>
                <td>门店logo</td>
                <td>服务名称</td>
                <td>店主</td>
                <td>联系电话</td>
                <td>门店时间</td>
                <td>门店状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for=" item in Info">
                <td><input type="checkbox" :value="item.m_id" @change="FanXuan"></td>
                <td>{{item.m_id}}</td>
                <td>{{item.m_name}}</td>
                <td>{{item.m_dizhi}}</td>
                <td> <img :src="item.m_img" style="width: 100px;height: 100px;"></td>
                <td>{{item.t_name}}</td>
                <td>{{item.m_dianzhu}}</td>
                <td>{{item.m_dianhua}}</td>
                <td>{{item.m_kdate}}-{{ item.m_jdate }}</td>
                <td>{{item.m_state==true?"启用":"禁用"}}</td>
                <td>
                    <input type="button" value="修改" @click="Updata(item.m_id)" style="margin-right: 15px;">
                    <input type="button" value="删除" @click="Del(item.m_id)" style="margin-right: 15px;">
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        数据共{{pageInfo.totalCount}}条，每页显示{{ pageInfo.pageSize }}条，当前{{ pageInfo.pageIndex }}/{{ pageInfo.pageCount }}页
     <a href="#" @click="PageLoadInfo('F')" style="margin-right: 20px;">首页</a>
     <a href="#" @click="PageLoadInfo('U')" style="margin-right: 20px;">上一页</a>
     <a href="#" @click="PageLoadInfo('N')" style="margin-right: 20px;">下一页</a>
     <a href="#" @click="PageLoadInfo('E')" style="margin-right: 20px;">尾页</a>
    </span>
</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import axios from 'axios';
    import { useRouter } from 'vue-router';
  const floe=ref(true)
const router=useRouter()
    onMounted(()=>{
        Show()
        ShowType()
    })
    const InfoType=ref([{
    "t_id": 0,
    "t_name": "string"
  }])
  const pageInfo=ref({
        pageIndex:1,
        pageSize:2,
        totalCount:0,
        pageCount:0
    })
  const name=ref("")
  const id=ref(0)
    const Info=ref([ {
    "m_id": 1,
    "m_name": "八维超市",
    "m_kdate": "2025-01-06",
    "m_jdate": "2025-01-10",
    "t_id": 1,
    "t_name": "早餐午餐",
    "m_dianzhu": "尤总",
    "m_dianhua": "15012345678",
    "m_jiesao": "死贵",
    "m_dizhi": "昌平区",
    "m_state": true,
    "m_img": "https://localhost:7258/Images/10.jpg",
    "m_IsDelete": true
  }])
  const ShowType=()=>{
    axios.get("https://localhost:7258/api/Men/ShowMenType")
    .then(res=>{
        InfoType.value=res.data
    })
}
  const Show=()=>{
    axios.get("https://localhost:7258/api/Men/ShowMen",
        {
            params:{
                name:name.value,
                id:id.value,
                pageIndex:pageInfo.value.pageIndex,
                pageSize:pageInfo.value.pageSize
            }
        }
    )
    .then(res=>{
        console.log(res.data)
        Info.value=res.data.pageData
        pageInfo.value.totalCount=res.data.totalCount
        pageInfo.value.pageCount=res.data.pageCount
    })
}

const quan=()=>{
    
}

const FanXuan=()=>{

}
const PageLoadInfo=(choose:string)=>{
        switch(choose){
            case "F":
                pageInfo.value.pageIndex=1;
                break;
            case "U":
                if(pageInfo.value.pageIndex>1){
                    pageInfo.value.pageIndex--;
                }else{
                    alert("当前已经为第一页了！")
                }
                break;
            case "N":
                if(pageInfo.value.pageIndex<pageInfo.value.pageCount){
                    pageInfo.value.pageIndex++;
                }else{
                    alert("当前已经为最后一页了！")
                }
                break;
            case "E":
                pageInfo.value.pageIndex=pageInfo.value.pageCount;
                break;
        }
        Show();
    }
    const Del=(id:number)=>{
        if(confirm("确定删除吗？")){
            axios.delete("https://localhost:7258/api/Men/DelMen?id="+id)
            .then(res=>{
                if(res.data>0){
                    alert("删除成功")
                    Show()
                }else{
                    alert("删除失败")
                }
            })
        }
    }
 
    const Delpl=()=>{
        if(confirm("确定删除吗？")){
            axios.delete("https://localhost:7258/api/Men/DelMen?id="+id)
            .then(res=>{
                if(res.data>0){
                    alert("删除成功")
                    Show()
                }else{
                    alert("删除失败")
                }
            })
        }
    }
    const Statepl=()=>{
        if(confirm("确定修改吗？")){
            axios.delete("https://localhost:7258/api/Men/DelMen?id="+id)
            .then(res=>{
                if(res.data>0){
                    alert("修改成功")
                    Show()
                }else{
                    alert("修改失败")
                }
            })
        }
    }
    const Updata=(id:number)=>{
        router.push({
            name:"UpMen",
            params:{
                id:id
            }
        })
    }
</script>